<template>
  <div v-title="'商品管理 - 世外生活运营平台'">
    <mk-breadcrumb :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight - fixedHeightSmall - 100)+'px'}]">
    <div class="content-box MkProductDetail" style="overflow:hidden;height:100%;margin-bottom:0;">
      <div class="MkProductDetailContent"  v-loading="loadingTab" element-loading-text="拼命加载中">
        <div class="content">
          <div class="upDiv">
            <div class="leftDiv">
              <div class="showBigImage" @click="viewImage(bigImage.accessUrl)">
                <img alt='' :src="bigImage.accessUrl" />
              </div>
              <div class="showSmallImage">
                <div class="imageList" v-for="image in productDetail.images" @mouseover="switchImage(image)">
                  <img alt='' :src="image.thumbImageURL" />
                </div>
              </div>
            </div>
            <div class="rightDiv">
              <div class="productTitle">{{productDetail.goodsName}}</div>
              <div class="otherInfo">{{productDetail.feature}}</div>
              <div class="productInfo">
                <div class="productState" :class="{'hasPublished': productDetail.published}">{{productDetail.published ? '已上架' : '已下架'}}</div>
                <el-row>
                  <el-col :span="4" class="fontColorThree textAlignRight">商品ID</el-col>
                  <el-col :span="6" class="fontColorTwo infoValue">{{productDetail.goodsNumber}}</el-col>
                  <el-col :span="4" class="fontColorThree textAlignRight">商品分类</el-col>
                  <el-col :span="10" class="fontColorTwo infoValue">{{productDetail.categoryFullName}}</el-col>
                </el-row>

                <el-row>
                  <el-col :span="4" class="fontColorThree textAlignRight">商家编号</el-col>
                  <el-col :span="6" class="fontColorTwo infoValue">{{sellerNumber}}</el-col>
                  <el-col :span="4" class="fontColorThree textAlignRight">商品条形码</el-col>
                  <el-col :span="10" class="fontColorTwo infoValue">{{goodsCode}}</el-col>
                </el-row>

                <el-row>
                  <el-col :span="4" class="fontColorThree textAlignRight">限购</el-col>
                  <el-col :span="6" class="fontColorTwo infoValue">
                    {{!productDetail.limitBuyAmount? '不限购' : productDetail.limitBuyAmount}}
                  </el-col>
                  <el-col :span="4" class="fontColorThree textAlignRight">运费</el-col>
                  <el-col :span="10" class="fontColorTwo infoValue">
                    <span v-if="productDetail.transportMoney=='0.00' && productDetail.transportMoneyOutside=='0.00'">包邮</span>
                    <span v-else-if="productDetail.transportMoney=='0.00' && productDetail.transportMoneyOutside!='0.00'">
                      社区内包邮 &nbsp;&nbsp;&nbsp;社区外￥{{productDetail.transportMoneyOutside}}
                    </span>
                    <span v-else-if="productDetail.transportMoney!='0.00' && productDetail.transportMoneyOutside=='0.00'">
                      社区内￥{{productDetail.transportMoney}}&nbsp;&nbsp;&nbsp;社区外包邮
                    </span>
                    <span v-else>
                      <template v-if="productDetail.transportMoney == productDetail.transportMoneyOutside">
                        ￥{{productDetail.transportMoney}}
                      </template>
                      <template v-else>
                        社区内￥{{productDetail.transportMoney}} &nbsp;&nbsp;&nbsp;社区外￥{{productDetail.transportMoneyOutside}}
                      </template>
                    </span>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="4" class="fontColorThree textAlignRight">总库存</el-col>
                  <el-col :span="6" class="fontColorTwo infoValue">{{stock}}</el-col>
                  <el-col :span="4" class="fontColorThree textAlignRight">总销量</el-col>
                  <el-col :span="10" class="fontColorTwo infoValue">{{productDetail.salesVolume}}</el-col>
                </el-row>

                <el-row>
                  <el-col :span="4" class="fontColorThree textAlignRight" style="position:relative;top:3px;">
                    {{productDetail.advanceStatus== 'AllAdvance'?'预售价':'一口价'}}
                  </el-col>
                  <el-col :span="6" class="fontColorTwo infoValue" style="font-size:18px;color:#F61430;">
                    ￥{{minPrice}}
                  </el-col>
                  <template v-if="productDetail.collage === 'Collage'">
                    <el-col :span="4" class="fontColorThree textAlignRight">拼单价</el-col>
                    <el-col :span="10" class="fontColorTwo infoValue">￥{{collage.price}}&nbsp;&nbsp;&nbsp;{{collage.amount}}人有效</el-col>
                  </template>
                </el-row>

                <template v-if="productDetail.advanceStatus== 'AllAdvance'">
                  <el-row>
                    <el-col :span="4" class="fontColorThree textAlignRight">预售结束时间</el-col>
                    <el-col :span="20" class="fontColorTwo infoValue">{{productDetail.advanceSellTime}}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="4" class="fontColorThree textAlignRight" >最晚发货时间</el-col>
                    <el-col :span="20" class="fontColorTwo infoValue" >{{productDetail.latestDeliveryTime}}</el-col>
                  </el-row>

                </template>

                  <template v-for="spec in productDetail.specifications">
                    <el-row>
                      <el-col :span="4" class="fontColorThree textAlignRight">
                        {{spec.name}}
                      </el-col>
                      <el-col :span="20" class="proValue infoValue fontColorTwo" style="position:relative;top:-5px;">
                        <span v-for="attr in spec.attributes" :class="{'selected':attr.selected}" @click="loadPriceByAttr(spec.id,attr)">{{attr.value}}</span>
                      </el-col>
                    </el-row>

                  </template>
                <!--</el-row>-->
              </div>
              <div class="serverInfo" v-if="productDetail.services && productDetail.services.length != 0">服务信息：
                <span v-for="(service,index) in productDetail.services">{{service.name}}
                  <span v-if="index !== productDetail.services.length-1">、</span>
                </span>
              </div>
              <div class="sendInfo">配送信息：由
                <span style="color:#3BC0C3">{{productDetail.shopName}}</span>从{{productDetail.cityName}}发货，并提供售后服务。
              </div>
            </div>
          </div>
          <div class="downDiv">
            <div class="productDetailTitle">
              <div>商品详情</div>
            </div>
            <div class="productDetailText" v-html="productDetail.goodsDetail"></div>
          </div>
        </div>
      </div>
      <div class="operationDiv">
        <div class='btnStyle color2' v-if="productDetail.published" @click="upOrDownGoods(false)">下架</div>
        <div class='btnStyle color2' v-else @click="upOrDownGoods(true)">上架</div>
        <div class='btnStyle color2' v-clipboard = 'copyLink' @success="copySuccess" @error="copyError">复制链接</div>
      </div>
    </div>
    </el-scrollbar>
    <!--预览图片-->
    <el-dialog :visible.sync="imageDialogVisible"  custom-class="show-image-dialog" top="0%">
      <img :src="imageViewUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
  import * as constants from '../../utils/constants'
import MkBreadcrumb from '../../components/MkBreadcrumb.vue'
import productService from '../../services/product'
  import {mapState} from 'vuex'
export default {
  name: 'MkProductDetail',
  components: {
    MkBreadcrumb
  },
  computed: mapState({
    bodyHeight: state => state.global.bodyHeight,
    fixedHeightSmall: state => state.global.fixedHeightSmall,
    copyLink() {
//      return constants.MARKET_HOST+'/mi/goods/share/'+this.$route.query.id+'.htm';
      return constants.MARKET_HOST+'/mi/web/goods/detail.htm?goodsId='+this.$route.query.id;
    }
  }),
  methods: {
    copySuccess(e) {
      this.$message.success('复制成功');
    },
    copyError(e) {
      this.$message.warning('复制失败');
    },
    viewImage(src) {
      this.imageDialogVisible = true;
      this.imageViewUrl = src;
    },
    loadPriceByAttr(specId, attr) {
      let removeObj = this.removeExistedSpecId(specId);
      if (!removeObj || (removeObj.specId !== specId || removeObj.attrId !== attr.id)) {
        this.specAttrs.push({ specId: specId, attrId: attr.id, attr: attr });
      }

      attr.selected = true;
      let attributeIds = '';
      let length = this.specAttrs.length;
      for (let index = 0; index < length; index++) {
        let obj = this.specAttrs[index];
        attributeIds += obj.attrId;
        if (index < length - 1) {
          attributeIds += ',';
        }
      }
      if (attributeIds) {
        productService.loadPriceByAttr({ goodsId: this.productDetail.id, attributeIds: attributeIds }, (data) => {
          this.minPrice = data.data.minPrice
          this.stock = data.data.stock;
          this.sellerNumber =  data.data.sellerNumber;
          this.goodsCode =  data.data.goodsCode;
          this.collage.price = data.data.collagePrice;
          this.collage.amount = data.data.collageAmount;
        });
      }
    },
    isSelected(specId, attrId) {
      for (let index = 0; index < length; index++) {
        let obj = this.specAttrs[index];
        if (obj.specId === specId && obj.attrId === attrId) {
          return true;
        }
      }
      return false;
    },
    removeExistedSpecId(specId) {
      let i = -1;
      for (let index = 0; index < this.specAttrs.length; index++) {
        let obj = this.specAttrs[index];
        if (obj.specId === specId) {
          i = index;
          break;
        }
      }
      if (i !== -1) {
        let removeObj = this.specAttrs[i];
        this.$nextTick(() => {
          removeObj.attr.selected = false;
        })
        this.specAttrs.splice(i, 1)
        return removeObj;
      }
    },
    upOrDownGoods(state) {
      let str = state ? '上架' : '下架';
      this.$confirm('您是确定要' + str + '此商品?', '商品' + str, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        closeOnPressEscape: false,
        customClass: 'confirmBox_warning'
      }).then(() => {
        productService.upOrDownGoodsServer({ published: state, goodsIds: this.productDetail.id }, () => {
          this.$message.success('成功' + str + '商品');
          this.productDetail.published = str == '下架' ? false : true;
        }, () => {
        });
      }).catch(() => {
      });
    },
    switchImage(image) {
      this.bigImage = image;
    },
    loadData() {
      this.loadingTab = true;
      productService.loadProductDetail(this.$route.query, (data) => {
        this.productDetail = data.data;
        if (this.productDetail.images.length > 0) {
          this.bigImage = this.productDetail.images[0];
        }
        this.minPrice = this.productDetail.minPrice;
        this.stock = this.productDetail.stock;
        this.collage.price = this.productDetail.collageMinPrice;
        this.collage.amount = this.productDetail.collageMinAmount;
        if(!this.productDetail.goodsPriceStores){
          this.sellerNumber = this.productDetail.sellerNumber;
          this.goodsCode = this.productDetail.goodsCode;
        }
        this.loadingTab = false;
      });
    }
  },
  mounted: function() {
  },
  activated(){
    this.loadData();
  },
  data() {
    return {
      collage:{
        price:'',
        amount:'',
      },
      loadingTab: false,
      imageViewUrl: '',
      imageDialogVisible: false,
      breadcrumbData: {
        list:[
          { name: '商品管理', path: null, clickAble: false },
           { name: '商品列表', path: '/productMgt', clickAble: true },
          { name: '商品详情', path: null, clickAble: false }
        ],
        returnData: {
          isReturn: true, path: null
        },
        iconName: 'product-icon',
      },
      productDetail: {},
      bigImage: '',
      specAttrs: [],
      minPrice: 0,
      stock: 0,
      sellerNumber: '',
      goodsCode: ''
    }
  }
}
</script>
<style lang="less">
@import '../../assets/style/main.less';

.MkProductDetail {
  .operationDiv {
    position:fixed;
    bottom:0;
    width:100%;
    max-width:1220px;
    background-color: @primaryColor;
    padding: 0px 40px;
    .color1 {
      color: @primaryColor;
    }
    .color2 {
      color: @creatButton;
    }
    .btnStyle {
      min-width: 120px;
      display: inline-block;
      height: 40px;
      background-color: #fff;
      text-align: center;
      line-height: 40px;
      border-radius: 5px;
      margin-right: 60px;
      cursor: pointer;
      font-size: 14px;
      margin-top: 30px;
      margin-bottom: 30px;
    }
  }
  .MkProductDetailContent {
    background-color: #fff;
    padding: 60px 0 0px;
    height:100%;
    .content {
      width: 1030px;
      margin: 0px auto;
      .upDiv {
        overflow: hidden;
        .leftDiv {
          float: left;
          width: 400px;
          .showBigImage {
            .showImageInFixedContainer(400px,400px);
            cursor: pointer;
          }
          .showSmallImage {
            margin-top: 10px;
            overflow: hidden;
            .imageList{
              cursor: pointer;
              .showImageInFixedContainer(70px,70px);
              margin: 5px;
              float: left;
            }
          }
        }
        .rightDiv {
          float: right;
          width: 600px;
          .productTitle {
            font-size: 20px;
            color: @fontColorOne;
          }
          .otherInfo {
            color: @primaryColor;
            font-size: 14px;
            margin: 20px 0 10px;
          }
          .productInfo {
            background: #F6F7F8;
            margin-bottom: 5px;
            position: relative;
            padding: 20px 0 10px;
            .hasPublished{
              color:#4dbd74!important;
              border:3px solid #4dbd74!important;
            }
            .productState {
              position: absolute;
              right: 0px;
              top:0px;
              .my-opacity(0.3);
              width:60px;
              text-align: center;
              height:60px;
              line-height: 60px;
              .my-transform(rotate(30deg));
              .my-border-radius(100%);
              font-size:16px;
              color:#F6A623;
              border:3px solid #F6A623;
            }
            .el-row {
              font-size: 14px;
              .el-col {
                margin-bottom: 20px;
              }
              .infoValue {
                padding-left: 20px;
              }
              .proValue {
                span {
                  display: inline-block;
                  height: 30px;
                  padding: 0 10px;
                  line-height: 30px;
                  background: #E1ECEF;
                  margin-right: 10px;
                  .my-border-radius(3px);
                  cursor: pointer;
                }
                .selected {
                  background: #1EC6CA;
                  color: white;
                }
              }
            }
          }
          .serverInfo,
          .sendInfo {
            font-size: 14px;
            color: @fontColorTwo;
            line-height: 25px;
          }
        }
      }
      .downDiv {
        margin-bottom: 100px;
        .productDetailTitle {
          background: #F6F7F8;
          height: 60px;
          >div {
            height: 100%;
            color: #fff;
            background-color: @primaryColor;
            width: 150px;
            font-size: 14px;
            text-align: center;
            line-height: 60px;
            margin-top: 15px;
          }
        }
        .productDetailText {
          word-break: break-all;
          /* Internet Explorer 5.5+ */
          white-space: pre-wrap;
          /* Firefox */
          img {
            max-width: 100%;
            height: auto;
          }
        }
      }
    }
  }
}
</style>
